<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<!--<van-nav-bar title="我的" left-text="返回" left-arrow @click-left="onClickLeft" />-->
				<van-icon name="arrow-left" size="22" style="position: absolute;z-index: 99;top: 10px;left: 10px;" @click="onClickLeft" />
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
					<van-swipe @change="onChange">
						<van-swipe-item v-for="(item,index) in listImg" :key="item.index">
							<van-image width="100%" height="100%" :src="item.img" />
						</van-swipe-item>
					</van-swipe>
					<div style="position:absolute;right: 0;margin: -30px 5px;background: white;padding: 0px 10px;border-radius: 10px;opacity: 0.5;font-size: 13px;">
						<span style="opacity: 1;color: black;">{{ current+1 }}/{{listImg.length}}</span>
					</div>
					<div style="height: 30px;width: 100%;background: #3fb776;top: -5px;position: relative;">
						<div style="position: absolute;top: 5px;left: 10px;">
							<van-icon name="clock-o" size="20px" color="white" />
							<span style="font-size: 14px;position: relative;top: -5px;color: white;" v-if="list.status == 1">{{$t('PropertyDetails.v1')}}</span>
							<span style="font-size: 14px;position: relative;top: -5px;color: white;" v-if="list.status == 2">{{$t('PropertyDetails.v2')}}</span>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: -5px;" class="content-product">
						<div style="padding: 10px;">
							<span v-text="list.title">香奈儿女士包包一个，这个包包非常非常非常非常非常非常好</span>
							<div style="font-size: 13px;padding: 10px 0px;">
								<span>{{$t('PropertyDetails.v3')}}:</span>
								<span style="color: rgb(249, 73, 81);" v-text="parseFloat(list.pay).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">100 USDT</span>
							</div>
							<div style="padding: 10px 0px;">
								<van-progress v-if="list.ratio" :percentage="Number(parseFloat(Number(list.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
								<van-progress v-if="!list.ratio" :percentage="0" color="#22a77b" />
							</div>
							<div style="padding: 15px 0px;" align="center">
								<van-row justify="center" style="color: #7d7e80;font-size: 13px;" class="product-detail-title">
									<van-col span="8">{{$t('PropertyDetails.v4')}}</van-col>
									<van-col span="8">{{$t('PropertyDetails.v5')}}</van-col>
									<van-col span="8">{{$t('PropertyDetails.v6')}}</van-col>
								</van-row>
								<van-row justify="center" style="color: black;font-size: 13px;padding-top: 10px;" class="product-detail-price">
									<van-col span="8" v-text="parseFloat(list.amountRaised).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">400 USDT</van-col>
									<van-col span="8" v-text="parseFloat(list.amountPlan).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">8000 USDT</van-col>
									<van-col span="8" v-text="list.validTotal + ' ' + $t('PropertyDetails.v7')">20 人</van-col>
								</van-row>
							</div>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: 10px;" class="product-detail-income">
						<div style="padding: 10px;">
							<div style="font-size: 16px;" class="product-detail-income-title"><b>{{$t('PropertyDetails.v8')}}</b></div>
							<div style="font-size: 13px;padding: 10px 0px;" align="center">
								<van-row>
									<van-col span="24" style="text-align: left;">
										<span>{{$t('PropertyDetails.v9')}}</span>&nbsp;&nbsp;&nbsp;
										<span style="color: #7d7e80;" class="product-detail-income-value">{{$t('PropertyDetails.v10')}}</span>
									</van-col>
								</van-row>
								<van-row style="padding-top: 10px;">
									<van-col span="24" style="text-align: left;">
										<span>{{$t('PropertyDetails.v11')}}</span>&nbsp;&nbsp;&nbsp;
										<span style="color: #7d7e80;" class="product-detail-income-value" v-text="parseFloat(list.pay).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000 USDT</span>
									</van-col>
								</van-row>
								<van-row style="padding-top: 10px;">
									<van-col span="24" style="text-align: left;">
										<span>{{$t('PropertyDetails.v12')}}</span>&nbsp;&nbsp;&nbsp;
										<span style="color: #7d7e80;" class="product-detail-income-value" v-text="parseFloat(list.earnings).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') +  'USDT'">1000 EXUU</span>
									</van-col>
								</van-row>
								<van-row style="padding-top: 10px;">
									<van-col span="24" style="text-align: left;">
										<span>{{$t('PropertyDetails.v13')}}</span>&nbsp;&nbsp;&nbsp;
										<span style="color: #7d7e80;" class="product-detail-income-value">{{ list.joinTime | formatDate }}</span>
									</van-col>
								</van-row>
							</div>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: 10px;" class="bg-overlayColor dark-blue">
						<div style="padding: 10px;">
							<div style="font-size: 16px;">
								<b class="product-title-color product-title-border-color" style="border-right: 2px solid rgb(202, 203, 204);padding-right: 8px;">{{$t('PropertyDetails.v37')}}</b>
								<span style="color: rgb(125, 126, 128);" class="dark-blue" v-text="participate.total + '条'">15条</span>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$router.push({path: 'CrowdRaisingRecords',query: {projectId: list.projectId}})" v-if="participate.records.length > 0"><van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$toast($t('PropertyDetails.v38'))" v-if="participate.records.length == 0"><van-icon	
                name="arrow" style="position: relative;top: 2px;"/></span>
							</div>
							<div style="padding-top: 10px;font-size: 13px;color: #7d7e80;" class="dark-blue">
								<div class="jsImg">
									<van-row style="padding-bottom: 5px;" v-if="participate.records[0]">
										<van-col span="4" style="text-align: left;" v-text="participate.records[0] ? participate.records[0].userName : ''">钓鱼佬</van-col>
										<van-col span="10" style="padding-top: 2px;text-align: center;">{{participate.records[0].createTime | formatDate }}</van-col>
										<van-col span="10" style="text-align: right;"><span v-text="participate.records[0] ? participate.records[0].payExuu : ''"></span><span v-text="participate.records[0] ? participate.records[0].payType == 1 ? ' USDT' : ' Estate' : ''"></span></van-col>
									</van-row>
									<van-row style="padding-bottom: 5px;" v-if="participate.records[1]">
										<van-col span="4" style="text-align: left;" v-text="participate.records[1] ? participate.records[1].userName : ''">钓鱼佬</van-col>
										<van-col span="10" style="padding-top: 2px;text-align: center;">{{participate.records[1].createTime | formatDate }}</van-col>
										<van-col span="10" style="text-align: right;"><span v-text="participate.records[1] ? participate.records[1].payExuu : ''"></span><span v-text="participate.records[1] ? participate.records[1].payType == 1 ? ' USDT' : ' Estate' : ''"></span></van-col>
									</van-row>
									<div v-if="participate.total == null" style="text-align: center">
										{{$t('PropertyDetails.v16')}}
									</div>
								</div>
								<div v-if="participate.total == 0" style="text-align: center">
									{{$t('PropertyDetails.v38')}}
								</div>
							</div>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: 10px;" class="bg-overlayColor dark-blue">
						<div style="padding: 10px;">
							<div style="font-size: 16px;">
								<b class="product-title-color">{{$t('PropertyDetails.v14')}}</b>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$router.push({path: 'ParticipationInstructions',query: {projectId: list.projectId}})" v-if="list.joinExplain != null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$toast($t('PropertyDetails.v16'))" v-if="list.joinExplain == null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
							</div>
							<div style="padding-top: 10px;font-size: 13px;color: #7d7e80;" class="dark-blue">
								<div v-if="list.joinExplain != null" v-html="list.joinExplain" class="jsImg"></div>
								<div v-if="list.joinExplain == null" style="text-align: center">
									{{$t('PropertyDetails.v16')}}
								</div>
							</div>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: 10px;" class="bg-overlayColor dark-blue">
						<div style="padding: 10px;">
							<div style="font-size: 16px;">
								<b class="product-title-color">{{$t('PropertyDetails.v17')}}</b>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$router.push({path: 'ProjectProgress',query: {projectId: list.projectId}})" v-if="list.progress != null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
								<span class="dark-blue" style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;" @click="$toast($t('PropertyDetails.v18'))" v-if="list.progress == null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
							</div>
						</div>
						<div style="padding: 10px;font-size: 13px;color: #7d7e80;" class="dark-blue">
							<div v-if="list.progress != null" v-html="list.progress.content" class="jsImg"></div>
							<div v-if="list.progress == null" style="text-align: center">
								{{$t('PropertyDetails.v18')}}
							</div>
						</div>
					</div>
					<div style="background: white;color: black;margin-top: 10px;" class="bg-overlayColor dark-blue">
						<van-tabs v-model="index" swipeable title-active-color="#3ca76d" title-inactive-color="black">
							<van-tab :title="$t('PropertyDetails.v19')">
								<div class="dark-blue" style="padding: 10px 10px;font-size: 12px;color: #7d7e80;letter-spacing:1px;line-height: 20px;padding-bottom: 50px;">
									<div v-if="list.details != ''" v-html="list.details" class="jsImg">

									</div>
									<div v-if="list.details == ''" style="text-align: center;">
										{{$t('PropertyDetails.v20')}}
									</div>
								</div>
							</van-tab>
							<van-tab :title="$t('PropertyDetails.v21')">
								<div style="padding: 0px 30px;padding-bottom: 50px;">
									<div class="fh">
										<div v-for="(item,index) in list.shares" :key="item.index" v-if="list.shares != ''">
											<van-row class="dark-blue" style="font-size: 13px;color: #7d7e80;padding-top: 15px;">
												<van-col span="12" style="text-align: left;padding-left: 5px;">{{$t('PropertyDetails.v22')}}</van-col>
												<van-col span="12" style="text-align: right;padding-right: 5px;">{{$t('PropertyDetails.v23')}}</van-col>
											</van-row>
											<van-row style="font-size: 13px;padding-top: 10px;">
												<van-col span="12" style="text-align: left;padding-left: 5px;font-size: 12px;">
													{{ item.createTime | formatDate }}
												</van-col>
												<van-col span="12" style="text-align: right;padding-right: 5px;font-size: 12px;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000000.0000 USDT
												</van-col>
											</van-row>
										</div>
										<div class="dark-blue" v-if="list.shares == ''" style="font-size: 13px;color: #7d7e80;padding-top: 15px;text-align: center;">
											{{$t('PropertyDetails.v20')}}
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab :title="$t('PropertyDetails.v36')">
								<div style="padding: 0px 30px;padding-bottom: 50px;">
									<div class="fh">
										<div v-for="(item,index) in list.billings" :key="item.index" v-if="list.billings != ''">
											<van-row class="dark-blue" style="font-size: 13px;color: #7d7e80;padding-top: 15px;">
												<van-col span="12" style="text-align: left;padding-left: 5px;">{{$t('PropertyDetails.v24')}}</van-col>
												<van-col span="12" style="text-align: right;padding-right: 5px;">{{$t('PropertyDetails.v25')}}</van-col>
											</van-row>
											<van-row style="font-size: 13px;padding-top: 10px;">
												<van-col span="12" style="text-align: left;padding-left: 5px;font-size: 12px;">
													{{ item.createTime | formatDate }}
												</van-col>
												<van-col span="12" style="text-align: right;padding-right: 5px;font-size: 12px;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000000.0000 USDT
												</van-col>
											</van-row>
										</div>
										<div class="dark-blue" v-if="list.billings == ''" style="font-size: 13px;color: #7d7e80;padding-top: 15px;text-align: center;">
											{{$t('PropertyDetails.v20')}}
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</van-pull-refresh>
				<van-button type="primary" @click="sure" style="position: fixed;bottom: 0;z-index:2019;" v-if="list.ratio != 1 && list.currentDate >= list.joinTime && list.status == 1">{{$t('PropertyDetails.v26')}}</van-button>
				<van-button type="primary" style="position: fixed;bottom: 0;z-index:2019;background-color: rgb(153,153,153);border-color:rgb(153,153,153);" v-if="list.ratio == 1 || list.currentDate < list.joinTime || list.status == 2">{{$t('PropertyDetails.v26')}}</van-button>
			</div>
		</div>
		<van-popup v-model="show" class="show bg-overlayColor" position="bottom" @close="close">
			<div style="padding: 20px;">
				{{$t('PropertyDetails.v27')}}
				<div style="padding-top: 10px;font-size: 13px;color: #7d7e80;" class="dark-blue">
					{{$t('PropertyDetails.v28')}}{{parseFloat(list.pay).toFixed(5).slice(0,-1)}} {{$t('PropertyCrowdfunding.v12')}}USDT,{{$t('PropertyDetails.v29')}}
					<van-icon name="cross" size="20px" style="position: relative;top: -30px;float: right;" @click="close" />
				</div>
			</div>
			<div style="padding: 10px 20px;" align="center">
				<van-row style="font-size: 14px;" class="dark-blue">
					<van-col span="8" style="text-align: left;">{{$t('PropertyDetails.v30')}}{{coinSelect == '1' ? 'USDT' : 'Estate'}}</van-col>
					<van-col span="8">{{$t('PropertyDetails.v31')}}</van-col>
					<van-col span="8" style="text-align: right;">{{$t('PropertyDetails.v32')}}</van-col>
				</van-row>
				<van-row class="product-title-color" style="font-size: 13px;color: #7d7e80;padding-top: 15px;padding-bottom: 15px;">
					<van-col span="8" style="text-align: left;">{{parseFloat(list2.payExuu).toFixed(5).slice(0,-1)}} {{coinSelect == '1' ? 'USDT' : 'Estate'}}</van-col>
					<van-col span="8">{{parseFloat(Number(list2.ratio * 100)).toFixed(5).slice(0,-1) + '%'}}</van-col>
					<van-col span="8" style="text-align: right;">{{parseFloat(list2.earnings).toFixed(5).slice(0,-1)}} {{$t('PropertyCrowdfunding.v12')}}USDT</van-col>
				</van-row>
			</div>
			<div class="iconSelect">
				<div style="height: 5px;width: 100%; background: #f4f4f4;" class="overlay-content"></div>
				<van-radio-group v-model="coinSelect" @change="coinChange">
					<van-cell-group>
						<van-cell clickable @click="coinSelect = '2'" style="padding: 13px 16px;">
							<van-radio slot="right-icon" name="2" checked-color="#3ca76d" icon-size="14px"></van-radio>
							<div slot="title">
								<img src="../assets/images/icon-img1.png" />
								<span>Estate</span>
							</div>
						</van-cell>
						<van-cell title="USDT" clickable @click="coinSelect = '1'" style="padding: 13px 16px;">
							<van-radio slot="right-icon" name="1" checked-color="#3ca76d" icon-size="14px"></van-radio>
							<div slot="title">
								<img src="../assets/images/icon-img2.png" />
								<span>USDT</span>
							</div>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</div>
			<div style="padding: 20px;" align="center" class="product-title-border-color">
				<div align="center" style="padding: 20px 0px;">
					<van-stepper v-model.trim="value" async-change @change="onChange2" integer />
				</div>
				<div style="font-size: 13px;">
					<span>{{$t('PropertyDetails.v33')}} {{list2.balance }} {{coinSelect == '1' ? 'USDT' : 'Estate'}},</span>
					<span style="color: #1989FA;" @click="giveMoney">{{$t('PropertyDetails.v34')}}</span>
				</div>
				<!--<div style="font-size: 13px;">
					<span>{{$t('PropertyDetails.v33')}} {{list2.balance }} USDT,</span>
					<span style="color: #1989FA;" @click="giveMoney">{{$t('PropertyDetails.v34')}}</span>
				</div>-->
			</div>
			<div style="padding: 15px 20px;">
				<van-button type="primary" slot="button" size="normal" @click="sureOk" :loading="load">{{$t('PropertyDetails.v35')}}
				</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import { crowdfunding } from './../utils/api';
	import { formatDate } from './../utils/date';
	let _this;
	export default {
		name: "PropertyDetails",
		data() {
			return {
				list: {
					'progress': '',
					'billings': [],
					'shares': []
				},
				list2: '',
				listImg: [],
				current: 0,
				size: 10,
				active: 1,
				index: 0,
				show: false,
				value: '',
				load: false,
				isLoading: false,
				coinSelect: '1',
				participate: {
					total: '0',
					records: []
				}, //众筹记录对象
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			onClickLeft() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/'
					})
				}
			},
			getList() {
				crowdfunding.getProjectDetails({
					projectId: this.$route.query.projectId
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
						const baseList = [];
						for(let i = 0; i < res.data.pictureDetails.split(";").length; i++) {
							baseList.push({
								img: res.data.pictureDetails.split(";")[i]
							})
						}
						this.listImg = baseList;
					}
				})
				crowdfunding.getParticipateById({
					projectId: this.$route.query.projectId,
					current: 1,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.participate = res.data;
					}
				})
			},
			onChange(index) {
				this.current = index;
			},
			onChange2(value) { // 步进器的操作
				crowdfunding.getJoinData({
					projectId: this.$route.query.projectId,
					total: value,
					accountType: this.coinSelect
				}).then(res => {
					if(res.code == 200) {
						this.list2 = res.data;
					}
				})
			},
			sure() { // 打开立即参与的面板
				this.value = 1;
				this.show = true;
				crowdfunding.getJoinData({
					projectId: this.$route.query.projectId,
					total: this.value,
					accountType: '2'
				}).then(res => {
					if(res.code == 200) {
						this.list2 = res.data;
					}
				})
			},
			giveMoney() { // 立即充值
				this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置支付密码
					if(res.data.data == 1) { // 当true为已设置交易密码
						this.$router.push({
							path: '/ToChange',
							query: {
								coinSelect: this.coinSelect,
							}
						})
					} else {
						let _this = this
						Dialog.confirm({
							message: this.$t('Details.v1') + '！',
							confirmButtonText: this.$t('Details.v2'),
							cancelButtonText: this.$t('Details.v3'),
							cancelButtonColor: localStorage.style.includes('black') ? 'white' : ''
						}).then(() => {
							_this.$router.push({
								path: '/UpdatePayPwd',
								query: {
									type: 0,
									roid: 'PropertyDetails',
									projectId: _this.$route.query.projectId
								}
							})
						}).catch(() => { //稍后设置

						});
					}
				})
			},
			sureOk() { // 确定参与
				crowdfunding.getJoin({
					projectId: this.$route.query.projectId,
					total: this.value,
					accountType: this.coinSelect
				}).then(res => {
					if(res.code == 200) {
						this.getList();
					}
					this.$toast(res.msg);
				})
				this.show = false;
				this.load = false;
			},
			close() { // 关闭按钮
				this.value = '';
				this.show = false;
				this.load = false;
			},
			back() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/'
					})
				}
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: _this.$t('MyDividend.v10')
					});
					this.isLoading = false;
				}, 500);
			},
			coinChange(e) {
				crowdfunding.getJoinData({
					projectId: this.$route.query.projectId,
					total: this.value,
					accountType: e
				}).then(res => {
					if(res.code == 200) {
						this.list2 = res.data;
					}
				})
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		}
	}
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
	}
	
	/deep/ .van-swipe__indicators {
		display: none;
	}
	
	/deep/ .van-tabs__line {
		background-color: rgb(60, 167, 109);
	}
	
	/deep/ .show .van-stepper__input {
		background: transparent;
		border: 1px solid rgb(244, 244, 244);
		color: black;
		border-radius: 10px;
		width: 80px;
		height: 80px;
		margin: 0px 30px;
	}
	
	/deep/ .show .van-stepper__minus {
		border-radius: 50%;
	}
	
	/deep/ .show .van-stepper__minus--disabled,
	.van-stepper__minus--disabled:active,
	.van-stepper__plus--disabled,
	.van-stepper__plus--disabled:active {
		background: rgb(244, 244, 244);
	}
	
	/deep/ .show .van-stepper__plus {
		background: rgb(254, 32, 32);
		border-radius: 50%;
		width: 60px;
		height: 60px
	}
	
	/deep/ .show .van-stepper__minus,
	.van-stepper__plus {
		width: 60px;
		height: 60px;
	}
	
	/deep/ .show .van-stepper__minus::before,
	.van-stepper__plus::before {
		width: 18px;
		height: 2px;
	}
	
	/deep/ .show .van-stepper__plus::after {
		width: 2px;
		height: 18px;
		background-color: white;
	}
	
	/deep/ .show .van-stepper__plus::before {
		width: 18px;
		height: 2px;
		background-color: white;
	}
	
	/deep/ .show .van-button--info {
		border: none;
	}
	
	/deep/ .show .van-stepper__plus {
		background: rgb(60, 167, 109);
	}
	
	.van-progress {
		width: 95%;
	}
	
	/deep/ .jsImg img {
		width: 100%;
		height: 100%;
	}
	
	/deep/ .van-button {
		width: 100%;
	}
	
	.iconSelect {
		margin-top: 5px;
		img {
			height: 24px;
			width: 24px;
			float: left;
		}
		span {
			margin-left: 15px;
		}
	}
</style>